<script lang="ts">
import {onMounted, reactive, ref} from "vue";
import {UserFilled,Plus} from '@element-plus/icons-vue'
import request from "@/utils/request";
import UseRouter from "@/router";
import {rules} from "@typescript-eslint/eslint-plugin";

export default {
  setup() {
    const router=UseRouter
    const custId=ref("")
    const custImg=ref("")
    const formLabelWidth = '100px'
    const avatarUrl=ref("")
    const form = reactive({
      custAccount:"",
      custName: "",
      custTel:"",
      custAddress:""

    })

    const changeForm = reactive({
      custId:"",
      custName:"",
      custTel:"",
      custAddress:"",
      custImg:""
    })

    const dialogFormVisible = ref(false)

    onMounted(() => {
      getCustId()
      getCustImg()
      getData()
    })

    const getCustId = () =>{
      let item = localStorage.getItem("custId");
      try {
        custId.value = item ? JSON.parse(item) : null;
      } catch (error) {
        console.error('Error parsing JSON:', error);
      }
    }
    const getCustImg = () =>{
      let item = localStorage.getItem("avatar");
      try {
        custImg.value = item ? JSON.parse(item) : null;
      } catch (error) {
        custImg.value =''
        console.error('Error parsing JSON:', error);
      }
    }

    const getData = async() => {
      const res=await request.get(`/user/getUser/${custId.value}`)
      console.log(res.data)
      form.custAccount=res.data.data.custAccount
      form.custName=res.data.data.custName
      form.custTel=res.data.data.custTel
      form.custAddress=res.data.data.custAddress
      changeForm.custName=res.data.data.custName
      changeForm.custTel=res.data.data.custTel
      changeForm.custAddress=res.data.data.custAddress
      changeForm.custId=res.data.data.custId
      changeForm.custImg=custImg.value
    }
    const backToIndex = () =>{
      router.push('/index')
    }

    const updateUser = async() =>{
      console.log(changeForm)
      const res=await request.post(`/user/updateUser`,changeForm)
      console.log(res.data)
      dialogFormVisible.value=false
      custImg.value=changeForm.custImg
      window.localStorage.setItem("avatar",JSON.stringify(changeForm.custImg))
    }

    function handleAvatarSuccess(res: { data: string; }){
      avatarUrl.value=res.data
      changeForm.custImg=res.data
      console.log(res)
    }

    const logOut = () => {
      window.localStorage.clear()
      router.push('/index')
    }

    return{
      form,
      custId,
      custImg,
      UserFilled,
      backToIndex,
      dialogFormVisible,
      changeForm,
      formLabelWidth,
      updateUser,
      handleAvatarSuccess,
      avatarUrl,
      logOut
    }
  }
}
</script>

<template>
  <el-form :model="form" label width="200px" class="userPage">
    <p>个人信息</p>
    <el-avatar :icon="UserFilled" v-if="custImg === ''" :size="80"/>
    <el-avatar v-else :size="80" :src=custImg />
    <el-form-item label="账号:">
      <span>{{ form.custAccount }}</span>
    </el-form-item>
    <el-form-item label="用户名:">
      <span>{{ form.custName }}</span>
    </el-form-item>
    <el-form-item label="联系方式:">
      <span>{{ form.custTel }}</span>
    </el-form-item>
    <el-form-item label="地址:">
      <span>{{ form.custAddress }}</span>
    </el-form-item>
    <br/><br/><br/>
    <el-button type="primary" @click="dialogFormVisible = true">修改信息</el-button>
    <el-button type="primary" @click="backToIndex">返回首页</el-button>
    <el-button type="danger" @click="logOut">退出登录</el-button>
  </el-form>

  <el-dialog v-model="dialogFormVisible" title="请修改你的信息" width="550px">
    <el-form :model="changeForm">
      <div>
        <el-upload
        class="avatar-uploader"
        action="http://localhost:8081/uploadAvatar"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        >
          <img v-if="avatarUrl" :src="avatarUrl" class="avatar">
          <el-icon v-else class="avatar-uploader-icon" size="100px"><Plus /></el-icon>
        </el-upload>
      </div>
      <el-form-item label="用户名:" :label-width="formLabelWidth">
        <el-input v-model="changeForm.custName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="联系方式:" :label-width="formLabelWidth">
        <el-input v-model="changeForm.custTel" autocomplete="off" />
      </el-form-item>
      <el-form-item label="地址:" :label-width="formLabelWidth">
        <el-input v-model="changeForm.custAddress" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="updateUser" >
          确认
        </el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.userPage {
  border: 1px solid #DCDFE6;
  width: 600px;
  height: 600px;
  margin: 50px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}
.el-form-item{
margin-top:40px ;
}
.el-input{
  width: 400px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #b9b9b9;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>